﻿<!DOCTYPE html>
<html lang="en">

<head>
    <!-- IIS Virtual Directory name -->
    <!--<base href="/JSViewer_MVC_Core/">-->

    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='include/favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="include/jsViewer.min.css" rel="stylesheet">
    <link href="include/index.css" rel="stylesheet">
</head>

<body onload="loadViewer()">
    <div style="width: 100%; overflow-x: hidden">
        <div style="float:left; width: 200pt" class="main-nav navbar">
            <div id='list-heading'>Select report</div>
            <ul id="reportsList" class="nav navbar-nav"></ul>
        </div>
        <div style="float:right;width:calc(100% - 200pt)" id="viewerContainer">
        </div>
    </div>
    <script type="text/javascript" src="include/jsViewer.min.js"></script>
    <script type="text/javascript">
        const serverUrl = 'http://localhost:58865/';
        let viewer;

        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                reportService: {
                    url: serverUrl + 'api/reporting'
                },

            });
            localize();
            populateReports();
        }

        function setActive(report) {
            let reportsList = document.getElementById("reportsList");
            let reports = reportsList.children;
            for (let i = 0; i < reports.length; i++) {
                reports[i].classList.remove('active');
            }
            report.classList.add('active');
        }

        function populateReports() {
            let reportsList = document.getElementById("reportsList");
            let oReq = new XMLHttpRequest();
            oReq.onload = function () {
                let reportsArray = JSON.parse(this.responseText);
                for (let i = 0; i < reportsArray.length; i++) {
                    const reportName = reportsArray[i];
                    const report = document.createElement('li');
                    report.className = 'reportList_item';
                    if (i === 0) report.className += ' active'
                    const title = document.createElement('span');
                    title.innerText = reportName;
                    report.appendChild(title);
                    reportsList.appendChild(report);

                    report.addEventListener('click', function () {
                        viewer.openReport(reportName);
                        setActive(report);
                    });
                }
                if (reportsArray.length > 0)
                    viewer.openReport(reportsArray[0]);
            };
            oReq.open("get", serverUrl + "reports", false);
            oReq.send();
        }

        function localize() {
            if (navigator.language === 'ja') {
                document.getElementById("list-heading").innerText = "レポートを選択";
                document.title = "JSビューア";
            }
        }
    </script>
</body>
</html>